<template>
  <view class="list">
    <view class="item" v-for="(item, index) in data.list" :key="index">
      <view class="title">{{ item.title }}</view>
      <view style="overflow: hidden">
        <view class="l">
          <view class="word">活动方式：{{ hdsta(item.scope) }}</view>
          <view class="word" v-if="item.type === 'RATIO'">返利比例：1:{{ item.ratio }}</view>
          <view class="word" v-else>支付{{ item.payAmount }}元 送{{ item.points }}积分</view>
          <view class="time">开始时间：{{ item.startTime }}</view>
          <view class="time">结束时间：{{ item.endTime }}</view>
        </view>
        <view class="r" v-if="item.scope === 'RECHARGE'">
          <button class="btn" @click="pay(item.payAmount, item.id, item.type)">立刻充值</button>
        </view>
        <view class="r" wx:else>
          <button class="btn" @click="togood">立刻消费</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { hdsta } from '@/utils/utils';
import { onLoad } from '@dcloudio/uni-app';
import { err, toast } from '@/utils/uniapi';
import { api } from '@/api/store_api';
const data = reactive({
  page: 1,
  size: 20,
  list: []
});
onLoad(() => {
  paylist();
});
async function paylist() {
  try {
    const res = await api.payList({ status: 'NORMAL' });
    if (res.respCode === 200) {
      data.list = JSON.parse(res.source);
    } else {
      toast(res.msg);
    }
  } catch (error) {
    err(error);
    throw error;
  }
}
function pay(amount: string, mktid: any, type: string) {
  try {
    const payType = 'POINT_RECHARGE';
    const ordersId = 0;
    const processPayment = async (paydata: { payType: string; amount: any; ordersId: number; mktId: any }) => {
      const resp = await api.pay(paydata);
      if (resp.respCode === 200) {
        const payment = JSON.parse(resp.source);
        wx.requestPayment({
          ...payment,
          success: () => {
            toast('支付成功');
          },
          fail: () => {
            toast('支付失败');
          }
        });
      } else {
        toast(resp.msg);
      }
    };

    if (type === 'RATIO') {
      wx.showModal({
        title: '请输入充值金额',
        editable: true,
        complete: async (res: any) => {
          console.log(res)
          if (res.confirm) {
            if (res.content) {
              const datas = {
                payType,
                amount: res.content,
                ordersId,
                mktId: mktid
              };
              processPayment(datas);
            } else {
              toast('请输入充值金额');
            }
          }
        }
      });
    } else {
      wx.showModal({
        title: '您确定充值一下金额吗？',
        content: '充值金额' + amount,
        complete: async (res: any) => {
          if (res.confirm) {
            const datas = {
              payType,
              amount,
              ordersId,
              mktId: mktid
            };
            processPayment(datas);
          }
        }
      });
    }
  } catch (error) {
    err(error);
    throw error;
  }
}
function togood() {
  wx.switchTab({ url: '/pages/good/good' });
}
</script>

<style scoped>
/* user/pages/pay/pay.wxss */
.item {
  width: 690rpx;
  min-height: 280rpx;
  margin: 10rpx auto;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 10rpx;
}
.title {
  font-size: 36rpx;
  font-weight: 800;
  text-align: center;
}
.word {
  font-size: 28rpx;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: bold;
  color: #000000;
  margin-top: 16rpx;
}
.time {
  font-size: 28rpx;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #000000;
  margin-top: 8rpx;
}
.btn {
  width: 200rpx;
  background-color: red;
  color: #fff;
  font-size: 34rpx;
  font-weight: 800;
  margin-top: 60rpx;
}
</style>
